<template>
  <el-row :gutter="20">
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <CommunityTree @node-click="handleCommunityNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      <!-- 搜索 -->
      <ContentWrap>
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="" prop="keyWord">
          <el-input placeholder="请输入内容" v-model.trim="keyWord">
            <template #prepend>
              <el-select v-model="kType" placeholder="请选择" class="!w-120px">
                <el-option label="备注信息" value="equipName" />
                <el-option label="设备MAC" value="equipMac" />
                <el-option label="设备IP" value="equipIp" />
                <el-option label="安装人员" value="installMemberName_" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item label="终端型号" prop="classType">
          <el-select
            v-model="queryParams.classType"
            placeholder="请选择"
            clearable
              class="!w-120px"
          >
          <el-option
                v-for="dict in doorClassTypeDictDatas"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['zwsj:door-control:create']"
          >
            <Icon icon="ep:plus" class="mr-5px" /> 新增
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column
label="社区/描述" align="left"
            min-width="180"
          >
            <template #default="scope">
              <div> 社区：{{ scope.row.commName_ }} </div>
              <div>
                备注：{{ scope.row.equipName}}
              </div>
            </template>
        </el-table-column>
        <el-table-column label="安装位置/安装人员" align="left" prop="positionType"  width="340">
          <template #default="scope">
            <div>
              位置：<el-button
                type="primary"
                link
                :icon="Edit"
                @click="handleInstall(scope.row)"
                v-hasPermi="['zwsj:door-control:update']"
              >
                {{ scope.row.bindAddresses }}</el-button
              >
            </div>
            <div>人员：{{ scope.row.installMemberName_ }}</div>
          </template>
        </el-table-column>
        <el-table-column label="厂家/型号/MAC/IP" align="left" prop="classType" width="160">
          <template #default="scope">
            <div>厂家：<dict-tag :type="DICT_TYPE.DOOR_FACTORY" :value="scope.row.factory" /></div>
            <div>型号：<dict-tag :type="DICT_TYPE.DOOR_CLASS_TYPE" :value="scope.row.classType" /></div>
            <div>MAC：{{ scope.row.equipMac }} </div>
          </template>
        </el-table-column>
        <el-table-column label="状态/在线时间" align="left" width="210px">
          <template #default="scope">
            <div>状态：<dict-tag :type="DICT_TYPE.ONLINE_STATE" :value="scope.row.onlineStatus" /></div>
            <div>时间：{{ formatDate(scope.row.lastOnlineTime) }} </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="190">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="operDoorControl(scope.row)"
              v-hasPermi="['zwsj:door-control:update']"
            >
              操作
            </el-button>
            <el-button
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
              v-hasPermi="['zwsj:door-control:update']"
            >
              编辑
            </el-button>
            <el-button
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
              v-hasPermi="['zwsj:door-control:delete']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    </el-col>
  </el-row>

  <!-- 表单弹窗：添加/修改 -->
  <DoorControlForm ref="formRef" @success="getList" />
  <EquipBind ref="equipBindRef" @refresh-list="getList" />
  <OperDoorControl ref="operDoorControlRef" @refresh-list="getList" />
  
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' 
import { formatDate } from '@/utils/formatTime'
import { DoorControlApi, DoorControlVO } from '@/api/zwsj/doorcontrol'
import DoorControlForm from './DoorControlForm.vue'
import CommunityTree from '@/views/zwsj/common/CommunityTree.vue'
import EquipBind from '@/views/zwsj/equipBind/index.vue'
import OperDoorControl from './operDoorControl.vue'

/** 门禁设备 列表 */
defineOptions({ name: 'DoorControl' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const doorClassTypeDictDatas = getStrDictOptions(DICT_TYPE.DOOR_CLASS_TYPE)


const loading = ref(true) // 列表的加载中
const list = ref<DoorControlVO[]>([]) // 列表的数据
// 列表的总页数
const total = ref(0)


const keyWord = ref('')
const kType = ref('equipName')
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  commId: undefined,
  classType: undefined,
  equipName: '',
  equipMac: '',
  equipIp: '',
  installMemberId: undefined,
  sort: undefined,
  onlineStatus: undefined,
})
const queryFormRef = ref() // 搜索的表单

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    queryParams.equipName = ''
    queryParams.equipIp = ''
    queryParams.equipMac = ''
    if (kType.value == 'equipName') {
      queryParams.equipName = keyWord.value
    } else if (kType.value == 'equipIp') {
      queryParams.equipIp = keyWord.value
    }else if (kType.value == 'equipMac') {
      queryParams.equipMac = keyWord.value
    }

    const data = await DoorControlApi.getDoorControlPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await DoorControlApi.deleteDoorControl(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 初始化 **/
onMounted(() => {
  getList()
})

/** 处理区域被点击 */
const handleCommunityNodeClick = async (row) => {
  queryParams.commId = row.id
  await getList()
}

const equipBindRef = ref()
const handleInstall = async (row: any) => {
  let positionType =  "house";
  if(positionType == "") return false;
  equipBindRef.value.open(row.id, 'door_control',positionType, row.commId, row.equipName)
}

const operDoorControlRef = ref()
const operDoorControl = async (row: any) => {
  console.info(row.equipMac)
  operDoorControlRef.value.open(row.id,row.equipMac,row.equipName)
}

</script>